<template>
	<view class="con">
		<view class="bgFD2F55"></view>
		<view class="flex-ju-b">
			<view class="flex-a-i bgF3F5F7 flex1 ra20 height80">
				<image mode="widthFix" src="/static/sou.png" class="image mr20 ml30 width40"></image>
				<input confirm-type="search" @confirm="tapsearch" @input="tapsearch" placeholder-style="color:#999999;" class="size32 flex1" maxlength="24" v-model="key" placeholder="查单词/词根/课程" />
				<image v-if="iskey" mode="widthFix" @click="key=''" src="/static/close.png" class="image  mr20 width40"></image>
			</view>
			<view @click="tapsearch" class="ml30">搜索</view> 
		</view>
		
		<template v-if="!ishist">
			
			<view  class="flex-ju-a size28 color666 mt30 mb30">
				<view @click="tablist(index)" class="flex-ju-c flex-col mr50" :class="{active:tindex==index}" :key="index" v-for="(item,index) in ['单词','词根','课程']">
					{{item}}
					<view class="wh32-12 ra4  mt8">
						<image v-if="tindex==index" mode="widthFix" src="/static/tuibottom.png" class="image width32"></image>
					</view>
				</view>
			</view>
			<nodata v-if="isdata"></nodata>
			
			<view v-for="(item,a) in word" :key="a" @click="tapword(item)"  class="border-bECEDEE pb30 mb20">
				<view class="size32 bold">
					<!-- <rich-text :nodes="item.word?item.word:item.root"></rich-text> -->
					<mp-html  :content="item.word?item.word:item.root" />
				</view>
				<view class="color666 one size24 mt10">{{item.meaning?item.meaning:item.paraphrase}}</view>
			</view>
		</template>
		 
		<!-- 课程 -->
		<template v-if="tindex==2">
			<view v-for="(item,ub) in course" :key="ub" @click="tapto(item)" class=" flex border-bECEDEE pb30 mb30" >
				<view>
					<image  :src="item.coverImage" class="wh290-164 ra20"></image>
				</view>
				<view class="ml20  flex1">
					<view class=" height164 flex-ju-b flex-col"  style="align-items: start;">
						
					<view class="size28 bold one">
						<mp-html  :content="item.courseName?item.courseName:item.root" />
					</view>
					
					<view class="size24 color666 two width1000">
						<mp-html two="1" :content="item.summary" />
					</view>
					
					<view class="flex-ju-b  width1000">
						<view v-if="item.isLearning" class="wh140-48 ra5 bgF3F5F7 color999 size24 flex-ju-c">正在学习</view>
						<image v-else-if="item.isToll==0" mode="widthFix" src="/static/mianfei.png" class="width136 image"></image>
						<view v-else-if="item.isToll==2" class="bgFFEFF2 colorFD2F55 ra10 size24 wh140-50 flex-ju-c">去学习</view>
						<view v-else class="flex-a-i">
							<template v-if="item.discountPrice>0">
							<view class="size40 colorFD2F55 bold"><text class="size22">￥</text>{{item.discountPrice}}</view>
								<view class="size24 color666 deleted-text">{{item.originalPrice}}</view>
							</template>
							<view v-else class="size40 colorFD2F55 bold"><text class="size22">￥</text>{{item.originalPrice}}</view>
						</view>
						<view class="size24 color999">共{{item.wordCount}}词</view>
					</view>
					</view>
				</view>
			</view>
		</template>
		
		<template v-if="ishist">
			<view class="flex-ju-b mt30">
				<view class="size28 bold">历史记录</view>
				<image @click="$refs.host.open()" mode="widthFix" src="/static/del.png" class="image  ml30 width36"></image>
			</view>
			<nodata v-if="isdata"></nodata>
			<view class="flex-a-i flex-wrap size28">
				<template v-for="(item,b) in history">
					<view @click="taphistory(item)"  :key="b" v-if="b<7" class="borderD8D8D8 pg0-25 ra30 mr20 mt20 one height64 flex-a-i" style="max-width: 400rpx;line-height: 64rpx;">{{item}}</view>
				</template>
			</view>
		</template>
		
		<uni-popup ref="host">
			<view class="wh640-284 bgfff ra20 size32 posire">
				<view class="flex-ju-c height172 color222 ">删除全部搜索历史</view>
				<view class="flex-ju-b posiab width1000 bottom0 bold border-tD8D8D8 height112">
					<view @click="$refs.host.close()" class="flex1 flex-ju-c mr2">取消</view>
					<view @click="tapdel" class="flex1 height112 flex-ju-c colorFD2F55"  style="border-left:1px solid #D8D8D8;">确认</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				word:[],
				history:[],
				ishist:true,
				tindex:0,
				text:['luminous'],
				key:"",
				isdata:false,
				course:[],
				page:1
			}
		},
		onReachBottom() {
			if(this.tindex==2){
				return
			}
			this.page++
			this.listword()
			
		},
		computed:{
			iskey(){
				if(this.key){
					return true
				}else{
					return false
				}
			}
		},
		onLoad() {
			
			this.http('/api/history').then(res=>{
				this.history = res.data
				this.nodata(this.history,this)
			})
		},
		mounted() {
		},
		methods: {
			taphistory(item){
				this.key=item
				this.listword()
			},
			getcourse(){
				this.http('/api/course/home',{
					courseName:this.key,
					pageNo:this.page,
					pageSize:525
				},'post').then(res=>{
					var arr =[]
					res.data.map(item=>{
						arr.push(item.imageId)
						item.courseName = this.wreplace(this.key,item.courseName)
						item.summary = this.wreplace(this.key,item.summary)
					})
					
					this.httpimg(arr).then(ress=>{
						ress.data.map(item=>{
							res.data.map(items=>{
								if(item.fileId == items.imageId){
									items.coverImage = item.fileUrl
								}
							})
						})
						
						this.course = res.data
						this.nodata(this.course,this)
					})
					 
					
				})
			},
			listword(){
				// if(!this.key){
				// 	this.toast('输入要查的内容')
				// 	return
				// }
				
				this.ishist =false
				var url=''
				var data ={}
				if(this.tindex == 0){
					url ='/api/word/page'
					data={
						word:this.key,
						pageNo:this.page,
						pageSize:25
					}
				}else if(this.tindex == 1){
					url ='/api/root/page'
					data={
						root:this.key,
						pageNo:this.page,
						pageSize:25
					}
				}else {
					this.getcourse()
					return
				}
				
				this.http(url,data,'post').then(res=>{
					if(this.tindex == 0){
						res.data.map(item=>{
							item.word = this.wreplace(this.key,item.word)
						})
					}else if(this.tindex == 1){
						res.data.map(item=>{
							item.root = this.wreplace(this.key,item.root)
						})
					}
					
					this.word = [...this.word ,...res.data]
					this.nodata(this.word,this)
				})
				
			},
			tapword(item){
				if(this.tindex==1){
					//词根
					uni.navigateTo({
						url:"/pages/index/root_detail?id="+item.rootId
					})
					
				}else if(this.tindex==0){
					//单词
					uni.navigateTo({
						url:"/pages/index/words_detail?id="+item.id
					})
				}
			},
			tapto(item){
				if(this.tindex==1){
					//词根
					uni.navigateTo({
						url:"/pages/index/root_detail"
					})
				}else if(this.tindex==2){
					
					var dd=encodeURIComponent(JSON.stringify(item))
					
					uni.navigateTo({
						url:"/pages/index/ke_detail?type=1&item="+dd
					})
					
					// uni.navigateTo({
					// 	url:"/pages/index/vocabulary_list?id="+item.courseId
					// })
				}else{
					//单词
					uni.navigateTo({
						url:"/pages/index/words_detail"
					})
				}
			},
			tapsearch(){
				this.page=1
				this.word=[]
				this.listword()
			},
			tablist(index){
				this.page=1
				this.word=[]
				this.tindex = index
				this.listword()
			},
			tapdel(){
				
				this.http('/api/history',{
					word:this.key
				},'delete').then(res=>{
					this.$refs.host.close()
					this.toast('删除成功')
					this.history=[]
					this.nodata(this.history,this)
				})
				
				// uni.showModal({
				// 	title:'删除全部搜索历史',
				// 	success:(res)=> {
				// 		if(res.confirm){
							
				// 		}
				// 	},
				// 	confirmColor:"#FD2F55",
				// 	cancelColor:"#222"
				// })
			}
		}
	}
</script>

<style>
	page{
		background: #fff;
	}
	.active{
		font-weight: bold;
		color: #000;
	}
	
</style>

